let scheduledComponentLintRecheck = null
  let scheduledStylesLintRecheck = null
  let componentLintPending = false
  let stylesLintPending = false
  let componentLintSourceVersion = 0
  let stylesLintSourceVersion = 0

  const normalizeLintTargetIdentity = target => {
    const tabId = typeof target?.tabId === 'string' ? target.tabId.trim() : ''
    const path = typeof target?.path === 'string' ? target.path.trim() : ''
    const language =
      typeof target?.language === 'string' ? target.language.trim().toLowerCase() : ''

    return {
      tabId,
      path,
      language,
      key: `${tabId}|${path}|${language}`,
    }
  }

  const getCurrentLintTargetIdentity = scope => {
    const resolveTarget =
      scope === 'styles' ? getStylesLintTarget : getComponentLintTarget
    return normalizeLintTargetIdentity(resolveTarget())
  }

  const createLintRunContext = scope => {
    const target = getCurrentLintTargetIdentity(scope)
    const sourceVersion =
      scope === 'styles' ? stylesLintSourceVersion : componentLintSourceVersion

    return {
      scope,
      sourceVersion,
      targetKey: target.key,
    }
  }

  const isLintRunContextCurrent = (scope, runContext) => {
    if (!runContext || runContext.scope !== scope) {
      return false
    }

    const currentSourceVersion =
      scope === 'styles' ? stylesLintSourceVersion : componentLintSourceVersion
    if (runContext.sourceVersion !== currentSourceVersion) {
      return false
    }

    const currentTarget = getCurrentLintTargetIdentity(scope)
    return runContext.targetKey === currentTarget.key
  }

  const setTypecheckButtonLoading = isLoading => {
    const runtimeTypecheckButton = document.getElementById('typecheck-button')
    if (!(runtimeTypecheckButton instanceof HTMLButtonElement)) {
      return
    }

    runtimeTypecheckButton.classList.toggle('render-button--loading', isLoading)
    runtimeTypecheckButton.setAttribute('aria-busy', isLoading ? 'true' : 'false')
    runtimeTypecheckButton.disabled = isLoading
  }

  const setLintButtonLoading = ({ button, isLoading }) => {
    if (!(button instanceof HTMLButtonElement)) {
      return
    }

    button.classList.toggle('render-button--loading', isLoading)
    button.setAttribute('aria-busy', isLoading ? 'true' : 'false')
    button.disabled = isLoading
  }

  const typeDiagnostics = createTypeDiagnosticsController({
    cdnImports,
    importFromCdnWithFallback,
    getTypeScriptLibUrls,
    getTypePackageFileUrls,
    getJsxSource,
    getTypecheckSourcePath,
    getWorkspaceTabs,
    getRenderMode,
    setTypecheckButtonLoading,
    setTypeDiagnosticsDetails,
    setTypeDiagnosticsPending,
    setStatus,
    setRenderedStatus: () => {
      if (typeDiagnostics.getLastTypeErrorCount() > 0) {
        setStatus(
          `Rendered (Type errors: ${typeDiagnostics.getLastTypeErrorCount()})`,
          'error',
        )
        return
      }

      if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
        setStatus('Rendered', 'neutral')
      }
    },
    isRenderedStatus: () =>
      statusNode.textContent === 'Rendered' ||
      statusNode.textContent.startsWith('Rendered (Type errors:'),
    isRenderedTypeErrorStatus: () =>
      statusNode.textContent.startsWith('Rendered (Type errors:'),
    incrementTypeDiagnosticsRuns,
    decrementTypeDiagnosticsRuns,
    getActiveTypeDiagnosticsRuns,
    onIssuesDetected: ({ issueCount }) => {
      if (issueCount > 0) {
        setDiagnosticsDrawerOpen(true)
      }
    },
  })

  const setRenderedStatus = () => {
    if (typeDiagnostics.getLastTypeErrorCount() > 0) {
      setStatus(
        `Rendered (Type errors: ${typeDiagnostics.getLastTypeErrorCount()})`,
        'error',
      )
      return
    }

    if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
      setStatus('Rendered', 'neutral')
    }
  }

  const lintDiagnostics = createLintDiagnosticsController({
    cdnImports,
    importFromCdnWithFallback,
    getComponentSource: getJsxSource,
    getStylesSource: getCssSource,
    getStyleMode,
    setComponentDiagnostics: setStyleDiagnosticsDetails,
    setStyleDiagnostics: setStyleDiagnosticsDetails,
    setStatus,
    onIssuesDetected: ({ issueCount }) => {
      if (issueCount > 0) {
        setDiagnosticsDrawerOpen(true)
      }
    },
  })

  const clearComponentLintRecheckTimer = () => {
    if (scheduledComponentLintRecheck) {
      clearTimeout(scheduledComponentLintRecheck)
      scheduledComponentLintRecheck = null
    }
  }

  const clearStylesLintRecheckTimer = () => {
    if (scheduledStylesLintRecheck) {
      clearTimeout(scheduledStylesLintRecheck)
      scheduledStylesLintRecheck = null
    }
  }

  const markComponentLintDiagnosticsStale = () => {
    componentLintSourceVersion += 1
    clearComponentLintRecheckTimer()

    activeComponentLintAbortController?.abort()
    activeComponentLintAbortController = null
    lintDiagnostics.cancelComponent()
    setLintButtonLoading({ button: lintComponentButton, isLoading: false })

    componentLintPending = false
    syncLintPendingState()
    setStyleDiagnosticsDetails({
      headline: 'Source changed. Click Lint to run diagnostics.',
      level: 'muted',
    })

    if (statusNode.textContent.startsWith('Rendered (Lint issues:')) {
      setStatus('Rendered', 'neutral')
    }
  }

  const markStylesLintDiagnosticsStale = () => {
    stylesLintSourceVersion += 1
    clearStylesLintRecheckTimer()

    activeStylesLintAbortController?.abort()
    activeStylesLintAbortController = null
    lintDiagnostics.cancelStyles()
    setLintButtonLoading({ button: lintStylesButton, isLoading: false })

    stylesLintPending = false
    syncLintPendingState()
    setStyleDiagnosticsDetails({
      headline: 'Source changed. Click Lint to run diagnostics.',
      level: 'muted',
    })